import React, { useState, useEffect } from 'react';
import axios from 'axios'
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux'
import {
    DesktopOutlined,
    UserOutlined,
    UsergroupAddOutlined,
    SettingOutlined,
    SmileOutlined,
    KeyOutlined,
    CommentOutlined,
    SendOutlined,
    PartitionOutlined,
    CodeOutlined,
    AuditOutlined,
    BookOutlined,
    AppstoreOutlined,
    InsertRowAboveOutlined,
    MacCommandOutlined,
    CarryOutOutlined,
    LinkOutlined,
} from '@ant-design/icons';

import { Layout, Menu } from 'antd';
import './index.css'
const { Sider } = Layout;

// 侧边栏参数
function getItem(label, key, icon, children) {
    return {
        key,
        icon,
        children,
        label,
    };
}
// icon列表
const iconList = {
    "/home": <DesktopOutlined />,

    "/user-manage": <UserOutlined />,
    "/user-manage/list": <UsergroupAddOutlined />,

    "/right-manage": <SettingOutlined />,
    "/right-manage/role/list": <SmileOutlined />,
    "/right-manage/right/list": <KeyOutlined />,

    "/news-manage": <CommentOutlined />,
    "/news-manage/draft": <SendOutlined />,
    "/news-manage/category": <PartitionOutlined />,
    "/news-manage/add": <CodeOutlined />,

    "/audit-manage": <AuditOutlined />,
    "/audit-manage/audit": <BookOutlined />,
    "/audit-manage/list": <AppstoreOutlined />,

    "/publish-manage": <InsertRowAboveOutlined />,
    "/publish-manage/unpublished": <MacCommandOutlined />,
    "/publish-manage/published": <CarryOutOutlined />,
    "/publish-manage/sunset": <LinkOutlined />
    //.......
}

function SideMenu(props) {
    // const [collapsed] = useState(false);
    const [menu, setMenu] = useState([])
    useEffect(() => {
        // console.log(props, '侧边栏');
        axios.get("/rights?_embed=children").then(res => {
            // console.log(res.data);
            setMenu(res.data)
            // console.log(menu,'menu');
        })
    }, [])
    // 获取登录后的toekn用户信息
    const { role: { rights } } = JSON.parse(localStorage.getItem("token"))
    //检查用户是否具有权限
    const checkPagePermission = (item) => {
        return item.pagepermisson && rights.includes(item.key)
    }
    const renderMenu = (menuList) => {
        return menuList.map(item => {
            if (item.children?.length > 0 && checkPagePermission(item)) {
                return getItem(item.title, item.key, iconList[item.key], renderMenu(item.children))
            }
            return checkPagePermission(item) && getItem(item.title, item.key, iconList[item.key])
        })
    }
    const selectkey = [props.location.pathname]
    const openKey = ["/" + props.location.pathname.split('/')[1]]
    return (
        <Sider trigger={null} collapsible collapsed={props.isCollapsed}>
            <div className="logo">黄氏集团</div>
            <div className="demo-logo-vertical" />
            <Menu inlineCollapsed={false} theme="dark" selectedKeys={selectkey} defaultOpenKeys={openKey} mode="inline" items={renderMenu(menu)} onClick={(item) => {
                props.history.push(item.key)
            }} />
        </Sider>
    )
}

const mapStateToProps = ({ CollapsedReducer: { isCollapsed } }) => ({
    isCollapsed
})

export default connect(mapStateToProps)(withRouter(SideMenu))

